import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
// vuex: 状态(数据)管理工具，它可以集中式管理各个组件共享的数据，同时vuex中的数据是响应式的，跟组件data: {}中的数据一样，只要值被修改，就会触发页面更新渲染。
export default new Vuex.Store({
  // state属性：就是声明公共数据，共享数据。
  state: {
    count: 1, // 购物车数量
    name: "小王",
    users: [
      { id: 1, name: "小明1", sex: true },
      { id: 2, name: "小明2", sex: false },
      { id: 3, name: "小明3", sex: false },
      { id: 4, name: "小明4", sex: true },
      { id: 5, name: "小明5", sex: false },
    ],
  },
  // getters：它里面定义基于state原始数据派生/衍生出来的新数据，虽然内部infoTip是一个函数，但是在组件中使用的时候，当成属性使用。它的功能类似于计算属性computed。
  getters: {
    infoTip(state) {
      return state.count % 2 === 0
        ? `当前购物数量是${state.count}，为偶数项，不能参与活动`
        : `当前购物数量是${state.count}，为奇数项，可以参与活动`;
    },
    allTrueSex(state) {
      return state.users.filter(user => user.sex === true);
    },
    allFalseSex(state) {
      return state.users.filter(user => user.sex === false);
    },
  },
  mutations: {
    // vuex中的数据修改，组件必须commit提交mutation，进行修改。
    // 这里的函数有个名称，叫mutation，第一个参数是固定的state，第二个参数是子组件传过来的要修改的数据。
    setCount(state, newCount) {
      state.count = newCount;
    },
    setName(state, _name) {
      state.name = _name;
    },
    setUsers(state, newUsers) {
      state.users = newUsers;
    },
  },
  // mutations 直接修改state的，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
  // actions 以异步的方式修改state数据。
  actions: {
    // actions: 可以在函数中封装异步任务，各个组件通过this.$store.dispatch("getUsersList", url)调用异步action。
    // 当你需要发送一个异步请求，且需要把这个请求结果直接存储到vuex中，此时可以使用vuex中的action。
    getUsersList(context, url) {
      fetch(url)
        .then(res => res.json())
        .then(data => {
          console.log(data);
          context.commit("setUsers", data);
        });
    },
  },
  modules: {},
});
